@theme-red: #ED6D96;

.zy-index {
  background: #F7F8F9;
}
.home {
  position: relative;
  background: #fff;
  min-height: 1200rpx;
  width: 100%;
  overflow: hidden;
  .mk-price {
    color: @theme-red;
    margin: 16rpx 0;
    font-size: 30rpx;
    text-align: left;
    font-weight: 400;
    height: 40rpx;
    overflow: hidden;
  }

  .mk-title {
    padding: 10rpx 8rpx 15rpx;
    width: 100%;
    font-size: 28rpx;
    font-weight: 400;

    .btn {
      float: right;
      line-height: 2.3;
      font-size: 18rpx;
      border-radius: 71px;
      background: #ffffff;
      border: 0.5px solid #EDEEEF;
      color: #767778;
      padding: -4rpx 0rpx;

      .icon {
        position: relative;
        top: 3rpx;
        left: 3rpx;
      }
    }
  }

  .swiper {
    height: 344rpx;
    padding: 0 30rpx;
    margin-top: 20rpx;
    .slide-image {
      height: 344rpx;
      width: 100%;
    border-radius: 8rpx;
    }
  }

  .top-section {
    padding: 30rpx 30rpx;
    background: #ffffff;
    padding-bottom: 0;
    image {
      width: 100%;
      display: block;
      border-radius: 8rpx;
    }
  }
  .post-nav {
    position:relative;
    width:100%;
    height:140rpx;
    margin-top:10rpx;
    .bg {
      width: 100%;
      height: 118rpx;
    }
    .head {
      position:absolute;
      left:60rpx;
      width:70rpx;
      height:70rpx;
      border-radius:50%;
      top:27rpx;
    }
    .title {
      position:absolute;
      color:#fff;
      // color: black;
      top:27rpx;
      left:150rpx;
      width: 400rpx;
      font-size:28rpx;
      height:40rpx;
      display: flex;
      justify-items: center;
      .name {
        max-width: 260rpx;
        overflow: hidden;
      }
      .else {
        flex: 1;
      }
    }
  }
  .category-nav {
    padding: 15rpx 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    background: #ffffff;

    .box {
      margin: 12rpx 22rpx;
      width: 13%;

      img {
        display: block;
        width: 96rpx;
        height: 116rpx;
        border-radius: 8rpx;
      }
    }
  }

  .hot-section {
    padding: 10px 15px;
    background: #ffffff;

    image {
      width: 100%;
      height: none;
    }
  }

  .like-section {
    padding: 5px 15px;
    background: #fff;

    .list {
      .box {
        overflow: hidden;
        padding: 10px;
        margin-bottom: 10px;

        img {
          width: 145px;
          height: 145px;
          border-radius: 8rpx;
        }

        .t,
        .d {
          display: block;
          margin: 5px;
          overflow: hidden;
          font-size: 12px;
        }

        .t {
          color: #333;
          height: 1.2em;
        }
      }
    }
  }


  .hot-section-category {
    .item {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      background: #fff;
      text-align: center;
      border-bottom: solid 2rpx #eee;
      height: 215rpx;
      padding: 20rpx 0;

      .pic-left {
        width: 210rpx;
        height: 210rpx;
        border-radius: 8rpx;
      }

      .detail-mid {
        flex: 2;
        padding: 10rpx 26rpx;

        .title {
          font-size: 30rpx;
          text-align: left;
          word-break: break-all;
          padding: 0;
          font-weight: 400;
          max-height: 82rpx;
          width: 300rpx;
          overflow: hidden;
        }

        .detail {
          font-size: 25rpx;
          color: #b8b8b8;
          word-break: break-all;
          height: 38rpx;
          width: 400rpx;
          margin: 15rpx 0;
          overflow: hidden;
          text-align: left;
          font-weight: 400;
        }

        .price {
          font-size: 35rpx;
          color: @theme-red;
          text-align: left;
          font-weight: 400;
        }

        .btn {
          color: #fff;
          background: @theme-red;
          position: relative;
          top: -50rpx;
          left: 142rpx;
          font-size: 23rpx;
          padding: 0rpx 19rpx;
          border-radius: 42rpx;
          font-weight: 400;
          line-height: none;
          width: 160rpx;
        }

        .btn::after {
          border: none;
        }
      }
    }

    .item:last-child {
      border: 0;
    }
  }

  .recommend-section-category {
    display: flex;
    flex-flow: row wrap;
    background: #fff;
    margin: 26rpx 0;
    padding: 15rpx 30rpx;
  }

  .brand-section {
    position: relative;
    padding: 0;
    margin: 15rpx 30rpx;
    .content {
      position: absolute;
      z-index: 55;
      top: 0;
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      .logo {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin: 40rpx 20rpx;
      }

      .dec {
        flex: 1;
        color: #fff;
        padding: 40rpx 8rpx;
        position: relative;
        display: flex;
        flex-flow: column;
        justify-content: space-around;

        .title {
          color: #fff;
          display: flex;
          justify-content: space-between;
          .btn {
            background: #fff;
            color: #333;
            padding: 0rpx 20rpx;
            margin-right: 35rpx;
            font-weight: 400;
            font-size: 18rpx;
            border-radius: 36rpx;
            height: 40rpx;
            line-height: 40rpx;
            margin-top: 4rpx;
          }
        }

        .intro {
          font-size: 23rpx;
          min-width: 524rpx;
          height: 38px;
          box-sizing: border-box;
          overflow: hidden;
        }
      }
    }
    .brand-products {
      position: absolute;
      z-index: 55;
      top: 160rpx;
      height: 344rpx;
      padding: 20rpx;
      overflow: hidden;
    }
    .background {
      width: 100%;
      border-radius: 10rpx;
    }
  }

  .card {
    text-align: center;
    border-radius: 8rpx;
    margin: 0 10rpx;
    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx 8rpx 0 0;
    }
    .card-info {
      position: relative;
      background: #fff;
      top: -11rpx;
      padding: 6rpx;
      border-radius: 0 0 8rpx 8rpx;
      .mk-price {
        margin: 0;
      }
      .head {
        font-size: 22rpx;
        height: 65rpx;
        text-align: left;
        text-justify: kashida;
        overflow: hidden;
      }
    }
  }
}
